<template>
    <!--登录表单的容器-->
    <div class="login_container">
        <!--登录区域-->
        <div class="login_box">
            <!--头像-->
            <div class="avatar_box">
                <img src="../../assets/img/login_img.jpg">
            </div>
            <!--表单-->
            <el-form ref="loginFrom" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入账号" clearable
                        prefix-icon="el-icon-user-solid">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" clearable show-password
                        prefix-icon="el-icon-lock">
                    </el-input>
                </el-form-item>
                <div class="verifyCode_box">
                    <el-form-item prop="code" class="verifyCode">
                        <el-input v-model="loginForm.code" placeholder="请输入验证码" clearable prefix-icon="el-icon-mobile">
                        </el-input>
                    </el-form-item>
                    <img src="../../assets/img/verifyCode_img.png" alt="" class="verifyCode_img">
                </div>

                <el-form-item class="login_btn">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>

            </el-form>


        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                    code: ''
                },
                loginRules: {
                    username: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    code: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }],
                },
            }
        },

        methods: {
            submitForm() {
                this.$refs['loginFrom'].validate(valid => {
                    if (valid) {
                        //编程式连接
                        this.$router.push("/home");
                    } else {
                        alert("提交失败！");
                    }

                })
            },
            resetForm() {
                this.$refs['loginFrom'].resetFields();
            },
        }
    }
</script>
//使用 less 样式编程
<style lang="less" scoped>
    .login_container {
        height: 100%;
        background-color: #7fffd4;
        display: flex;
        justify-content: center;
        align-items: center;

        .login_box {
            //border: 2px solid rgb(63, 76, 145);
            height: 380px;
            width: 480px;
            margin: 0;
            padding: 0;
            background-color: #fff;

            .avatar_box {
                padding: 0;
                padding: 5px;
                border-radius: 50%;
                background-color: rgb(55, 253, 236);
                border: 2px solid s;
                height: 100px;
                width: 100px;
                margin: 0 auto;
                position: relative;
                bottom: 50px;

                img {
                    background-color: #EEEEEE;
                    border-radius: 50%;
                    height: 100%;
                    width: 100%;
                }

            }

            .login_form {
                width: 80%;
                margin: 0 auto;

                .verifyCode_box {
                    display: flex;
                    align-content: center;

                    .verifyCode {
                        flex: 3;
                    }

                    .verifyCode_img {
                        flex: 1;
                        height: 40px;
                    }
                }

                .login_btn {
                    display: flex;
                    justify-content: center;
                }
            }
        }

    }
</style>